<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="fonts/iconfont.css">
	<link rel="icon" href="img/favicon.ico">
	<link rel="stylesheet" href="css/index.css">

	<title>中蜜丝路-瑕</title>
</head>
<body>
	<div class="kong"></div>
	<div class="weui-search-bar" id="searchBar">
	  	<form class="weui-search-bar__form" id="form">
		    <div class="weui-search-bar__box">
		      	<i class="weui-icon-search"></i>
		     	<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索店内产品" required="">
		      	<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
		    </div>
		    <label class="weui-search-bar__label" id="searchText">
		      	<i class="weui-icon-search"></i>
		      	<span>搜索店内产品</span>
		    </label>
	  	</form>
	  	<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
	</div>
	<!-- 轮播图 -->
    <div class="lbt">
        <div class="swiper-container swiper-banner ">
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/temp/banner_a.jpg" /></div>
                <div class="swiper-slide"><img src="img/temp/banner_a.jpg" /></div>
                <div class="swiper-slide"><img src="img/temp/banner_a.jpg" /></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
	<!-- menu -->
    <div class="menu">
        <ul class="clearfloat">
            <li>
                <a href="javascript:">
                    <span><i class="iconfont icon-international"></i></span>
                    <h5>国际标准</h5>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <span><i class="iconfont icon-certification"></i></span>
                    <h5>工匠认证</h5>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <span><i class="iconfont icon-profession"></i></span>
                    <h5>专业培训</h5>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <span><i class="iconfont icon-share"></i></span>
                    <h5>共享多赢</h5>
                </a>
            </li>
        </ul>
    </div>
    <div class="find">
        <h4 class="text-center"><span class="pull-left"></span>蜜源寻蜜<span class="pull-right"></span></h4>
        <div class="banner-map">
            <a href="html/beehive_list.html"><img src="img/temp/map.jpg"></a>
        </div>
        <div class="link-list">
            <ul class="clearfloat">
                <li>
                    <a href="html/bee_farm_list蜂箱.html">
                        <span><i class="iconfont icon-factory"></i></span>
                        <span>蜂场</span>
                    </a>
                </li>
                <li>
                    <a href="html/bee_farm_list工匠.html">
                        <span><i class="iconfont icon-craftsman"></i></span>
                        <span>工匠</span>
                    </a>
                </li>
                <li>
                    <a href="html/beehive_list.html">
                        <span><i class="iconfont icon-honey"></i></span>
                        <span>蜂箱</span>
                    </a>
                </li>
            </ul>
    	</div>
    </div>
    <!-- 轮播图 -->
    <div class="tiao">
        <div class="swiper-container swiper-container-active">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="active-list">
                        <a href="html/committee.html">
                            <!-- 此处图片比例为3:2 -->
                            <img src="img/temp/active_1.jpg">
                            <div class="active-list-pro">
                                <h5>工匠认证</h5>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="active-list">
                        <a href="html/committee.html">
                            <img src="img/temp/active_2.jpg">
                            <div class="active-list-pro">
                                <h5>专委会介绍</h5>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="active-list">
                        <a href="html/committee.html">
                            <img src="img/temp/active_1.jpg">
                            <div class="active-list-pro">
                                <h5>专业培训</h5>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="active-list">
                        <a href="../html/committee.html">
                            <img src="img/temp/active_2.jpg">
                            <div class="active-list-pro">
                                <h5>专委会介绍</h5>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination" style="display: none;"></div>
        </div>
    </div>
    <div class="banner-video">
        <a href="html/video.html"><img src="img/temp/index_02.png"></a>
        <div class="cover-words bt">
            <h3>蜜蜂视界</h3>
            <p>Bees horizon</p>
        </div>
    </div>
    <div class="majors-title">
        <a href="">
            <p>We have a professional certification rating committee</p>
            <span>我们有专业的专委会评级认证</span>
        </a>
    </div>
    <div class="index_science">
        <h4 class="text-center"><span class="pull-left"></span>好蜜科普<span class="pull-right"></span></h4>
        <ul class="clearfloat">
            <li>
                <a href="html/popular_science_list好蜜科普.html">
                    <img src="img/temp/science_1.jpg" alt="">
                    <span>蜜源探秘</span>
                </a>
            </li>
            <li>
                <a href="html/popular_science_list好蜜科普.html">
                    <img src="img/temp/science_2.jpg" alt="">
                    <span>蜂蜜常识</span>
                </a>
            </li>
            <li>
                <a href="html/popular_science_list好蜜科普.html">
                    <img src="img/temp/science_3.jpg" alt="">
                    <span>蜂蜜种类</span>
                </a>
            </li>
            <li>
                <a href="html/popular_science_list好蜜科普.html">
                    <img src="img/temp/science_4.jpg" alt="">
                    <span>蜂蜜价值</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="kong1"></div>
    <!-- 返回顶部 -->
    <div id="to-top">
    	<a href="#top">
    		<div><span class="iconfont icon-stick"></span></div>
    	</a>
    </div>
    <!-- 底部 -->
    <div class="three clearfloat">
    	<a href="##">
    		<span class="iconfont icon-home-red"></span>
    		<p>首页</p>
    	</a>
    	<a href="html/beehive_list.html">
    		<span class="iconfont icon-location"></span>
    		<p>蜜源寻蜜</p>
    	</a>
    	<a href="html/member_info.html">
    		<span class="iconfont icon-center"></span>
    		<p>会员中心</p>
    	</a>
    </div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script src="plugins-插件/swiper/swiper-bundle.min.js"></script>
<script>
	//swiper 滑动
    var mySwiper = new Swiper('.swiper-container-active', {
        roundLengths : true,
        initialSlide :1,
        speed:600,
        slidesPerView:"auto",
        centeredSlides : true,
        followFinger : false,
//        spaceBetween: 30,
    });
    // 返回顶部
    $(document).ready(function(){
        //首先将#to-top隐藏
        $("#to-top").hide();
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#to-top").fadeIn(1500);
                }
                else
                {
                    $("#to-top").fadeOut(1500);
                }
            });
            //当点击跳转链接后，回到页面顶部位置
            $("#to-top").click(function(){
                $('body,html').animate({scrollTop:0},500);
                return false;
            });
        });
    });
    var swiper = new Swiper('.swiper-container', {
        loop : true,
      speed: 600,
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
      autoplay: {
          delay: 2000,//1秒切换一次
        },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
</script>
</body>
</html>